<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>打包管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="$route.query.preRouter"
          >项目管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>批量生成Apk包</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <el-form
        :model="project"
        label-width="100px"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="项目名称："> 橘子猫 </el-form-item>
        <el-form-item label="应用版本：" prop="version_num">
          <el-select v-model="project.version_num" placeholder="请选择应用版本">
            <el-option
              v-for="(version, i) in versionList"
              :key="i"
              :label="version.app_version"
              :value="version.version_number"
            >
              <span style="float: left">{{ version.app_version }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                version.version_number
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 渠道包选择 -->
        <el-form-item
          label="参与批量打包的渠道号："
          style="padding: 10px; background-color: #fafafa"
          prop="checkedList"
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-row>
            <el-checkbox-group
              v-model="project.checkedList"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="(channel, i) in channelList"
                :label="channel.channel_id"
                :key="i"
              >
                <el-card shadow="hover" style="width: 220px">
                  {{ channel.channel_id }}
                  <hr />
                  <br />
                  <br />
                  {{ channel.channel_info }}
                </el-card>
              </el-checkbox>
            </el-checkbox-group>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btachpack('ruleForm')"
            >批量打包</el-button
          >
          &nbsp;
          <router-link :to="$route.query.preRouter">
          <el-button >返回</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>

<script>
import { catUrl } from "@/config/env";
import { common } from "@/api/cat/httpRequest";
import {
  selectVersion,
  channelPack,
  appProjectPackManage as baseUrl,
} from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      project: {
        version_num: "",
        checkedList: [],
      },
      versionList: [],
      channelList: [],
      checkAll: false,
      isIndeterminate: true,
      rules: {
        version_num: [
          { required: true, message: "请选择应用版本", trigger: "blur" },
        ],
        checkedList: [
          { required: true, message: "请选择打包渠道", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //加载版本列表
    async getVersionList() {
      let data = await common(selectVersion.selectVersion, null, null, "GET");
      if (data.code == 1) {
        this.versionList = data.data;
      }
    },
    //加载渠道列表
    async getChannelListByAppId() {
      let data = await common(
        channelPack.getChannelListByAppId,
        null,
        null,
        "POST"
      );
      if (data.code == 1) {
        this.channelList = data.data;
      }
    },
    // 选择框
    handleCheckAllChange(val) {
      this.project.checkedList = val
        ? this.channelList.map((e) => e.channel_id)
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.channelList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.channelList.length;
    },
    //开始批量打包
    btachpack(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //发送批量打包请求
          let data = await common(baseUrl.batchPack,this.project,null,"POST");
        }
      });
    },
    //打包提醒
    packResult(info) {
      this.$alert(info, "打包提醒", {
        confirmButtonText: "确定",
      });
    },
  },
  created() {
    this.getVersionList();
    this.getChannelListByAppId();
  },
};
</script>

<style>
</style>